<juci-layout-single-column>
    <span style="font-size: 1.5em">Make sure that this layout matches: http://anvoz.github.io/bootstrap-tldr/</span>
    <h1 class="page-header" id="css">CSS</h1>

    <h2 id="typography">Typography</h2><!-- Headings -->

    <div class="media js-html-inspector" data-replace-target="&gt; div">
        <div class="media-left media-middle">
            <h1>h1 <small>small</small></h1>
        </div>

        <div class="media-left media-middle">
            <div class="h2">
                .h2 <small>small</small>
            </div>
        </div>

        <div class="media-left media-middle">
            <h3>h3 <small>small</small></h3>
        </div>

        <div class="media-left media-middle">
            <div class="h4">
                .h4 <small>small</small>
            </div>
        </div>

        <div class="media-left media-middle">
            <h5>h5 <small>small</small></h5>
        </div>

        <div class="media-left media-middle">
            <div class="h6">
                .h6 <small>small</small>
            </div>
        </div>
    </div>

    <div class="row js-html-inspector" data-remove-target="br"
    data-replace-target="&gt; div">
        <div class="col-sm-2 col-xs-4">
            <!-- Lead body copy -->
            <span class="lead">.lead</span><br>
            <!-- Bold -->
             <b>b (bold)</b><br>
            <strong>strong</strong>
        </div>

        <div class="col-sm-2 col-xs-4">
            <!-- Small text -->
            <small>small</small><br>
            <span class="small">.small</span>
        </div>

        <div class="col-sm-2 col-xs-4">
            <!-- Italics -->
            <em>em</em><br>
            <i>i (italic)</i>
        </div><!-- Inline text elements -->

        <div class="col-sm-2 col-xs-4">
            <!-- Deleted text -->
            <del>del</del><br>
            <!-- Strikethrough text -->
             <span style="text-decoration: line-through">s
            (strikethrough)</span><br>
            <!-- Inserted text -->
             <ins>ins</ins><br>
            <!-- Underlined text -->
             <span style="text-decoration: underline">u (underline)</span>
        </div>

        <div class="col-sm-2 col-xs-4">
            <!-- Inline code -->
            <code>code</code><br>
            <!-- Variables -->
             <var>var</var><br>
            <!-- Sample output from a program -->
             <samp>samp</samp>
        </div>

        <div class="col-sm-2 col-xs-4">
            <!-- Marked text -->
            <mark>mark</mark><br>
            <!-- User input -->
             <kbd>kbd</kbd>
        </div>
    </div><br>
    <!-- Alignment classes -->

    <div class="row js-html-inspector" data-replace-target="&gt; div">
        <div class="col-xs-4">
            <p class="text-left">.text-left</p>
        </div>

        <div class="col-xs-4">
            <p class="text-center">.text-center</p>
        </div>

        <div class="col-xs-4">
            <p class="text-right">.text-right</p>
        </div>

        <div class="col-xs-12">
            <div class="text-justify">
                .text-justify
            </div>
        </div>
    </div><br>
    <!-- Transformation classes -->

    <div class="js-html-inspector">
        <span class="text-lowercase">.text-lowercase</span> <span class=
        "text-uppercase">.text-uppercase</span> <span class=
        "text-capitalize">.text-capitalize</span>
    </div><br>
    <!-- Abbreviations -->

    <div class="js-html-inspector">
        <abbr title="abbreviation">abbr</abbr> <abbr class="initialism" title=
        "abbreviation.initialism">.initialism</abbr>
    </div><br>
    <!-- Addresses -->

    <div class="js-html-inspector">
        <address>
            <strong>address strong</strong><br>
            address<br>
            <a href="mailto:#">first.last@example.com</a>
        </address>
    </div><!-- Blockquotes -->

    <div class="row">
        <div class="col-sm-6 js-html-inspector">
            <blockquote>
                <p>blockquote p</p>

                <footer>
                    footer <cite title="Cite">cite</cite>
                </footer>
            </blockquote>
        </div>

        <div class="col-sm-6 js-html-inspector">
            <blockquote class="blockquote-reverse">
                <p>blockquote.blockquote-reverse p</p>

                <footer>
                    Someone famous in <cite title="Source Title">Source
                    Title</cite>
                </footer>
            </blockquote>
        </div>
    </div>

    <div class="row">
        <!-- Unordered list -->

        <div class="col-sm-4 col-xs-6 js-html-inspector" data-remove-target=
        "p:first">
            <p><strong>ul</strong></p>

            <ul>
                <li>li</li>

                <li>List item

                    <ul>
                        <li>ul li</li>

                        <li>List item</li>
                    </ul>
                </li>

                <li>List item</li>
            </ul>
        </div><!-- Ordered list -->

        <div class="col-sm-4 col-xs-6 js-html-inspector" data-remove-target=
        "p:first">
            <p><strong>ol</strong></p>

            <ol>
                <li>List item</li>

                <li>List item

                    <ol>
                        <li>List item</li>

                        <li>List item</li>
                    </ol>
                </li>

                <li>List item</li>
            </ol>
        </div><!-- Unstyled list -->

        <div class="col-sm-4 col-xs-6 js-html-inspector" data-remove-target=
        "p:first">
            <p><strong>ul.list-unstyled</strong></p>

            <ul class="list-unstyled">
                <li>List item</li>

                <li>List item

                    <ul>
                        <li>List item</li>

                        <li>List item</li>
                    </ul>
                </li>

                <li>List item</li>
            </ul>
        </div><!-- Inline list -->

        <div class="col-sm-4 col-xs-6 js-html-inspector" data-remove-target=
        "p:first">
            <p><strong>ul.list-inline</strong></p>

            <ul class="list-inline">
                <li>List item</li>

                <li>List item</li>

                <li>List item</li>
            </ul>
        </div>
    </div>

    <div class="row">
        <!-- Description -->

        <div class="col-xs-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>dl</strong></p>

            <dl>
                <dt>dt</dt>

                <dd>dd</dd>

                <dt>Term</dt>

                <dd>Description<br>
                Description</dd>
            </dl>
        </div><!-- Horizontal description -->

        <div class="col-xs-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>dl.dl-horizontal</strong></p>

            <dl class="dl-horizontal">
                <dt>Term</dt>

                <dd>Description</dd>

                <dt>Long term will be truncated</dt>

                <dd>Description<br>
                Description</dd>
            </dl>
        </div>
    </div>

    <h2 id="tables">Tables</h2><!-- Basic example -->

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>table.table</strong></p>

        <table class="table">
            <thead>
                <tr>
                    <th>thead tr th</th>

                    <th>th</th>

                    <th>Header</th>

                    <th>Header</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>tbody tr td</td>

                    <td>td</td>

                    <td>Data</td>

                    <td>Data</td>
                </tr>

                <tr>
                    <td>Data</td>

                    <td>Data</td>

                    <td>Data</td>

                    <td>Data</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="row">
        <!-- Striped rows -->

        <div class="col-sm-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>.table-striped</strong></p>

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Header</th>

                        <th>Header</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>Data</td>

                        <td>Data</td>
                    </tr>

                    <tr>
                        <td>Data</td>

                        <td>Data</td>
                    </tr>
                </tbody>
            </table>
        </div><!-- Bordered table -->

        <div class="col-sm-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>.table-bordered</strong></p>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Header</th>

                        <th>Header</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>Data</td>

                        <td>Data</td>
                    </tr>

                    <tr>
                        <td>Data</td>

                        <td>Data</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <!-- Hover rows -->

        <div class="col-sm-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>.table-hover</strong></p>

            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Header</th>

                        <th>Header</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>Data</td>

                        <td>Data</td>
                    </tr>

                    <tr>
                        <td>Data</td>

                        <td>Data</td>
                    </tr>
                </tbody>
            </table>
        </div><!-- Condensed table -->

        <div class="col-sm-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>.table-condensed</strong></p>

            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th>Header</th>

                        <th>Header</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>Data</td>

                        <td>Data</td>
                    </tr>

                    <tr>
                        <td>Data</td>

                        <td>Data</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div><!-- Responsive tables and Contextual classes -->

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>div.table-responsive table.table</strong></p>

        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Header</th>

                        <th>Header</th>

                        <th>Header</th>

                        <th>Header</th>

                        <th>Header</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td class="active">td.active</td>

                        <td class="success">td.success</td>

                        <td class="info">td.info</td>

                        <td class="warning">td.warning</td>

                        <td class="danger">td.danger</td>
                    </tr>

                    <tr class="active">
                        <td>tr.active td</td>

                        <td colspan="4">Applies the hover color to a particular
                        row or cell</td>
                    </tr>

                    <tr class="success">
                        <td>tr.success td</td>

                        <td colspan="4">Indicates a successful or positive
                        action</td>
                    </tr>

                    <tr class="info">
                        <td>tr.info td</td>

                        <td colspan="4">Indicates a neutral informative change
                        or action</td>
                    </tr>

                    <tr class="warning">
                        <td>tr.warning td</td>

                        <td colspan="4">Indicates a warning that might need
                        attention</td>
                    </tr>

                    <tr class="danger">
                        <td>tr.danger td</td>

                        <td colspan="4">Indicates a dangerous or potentially
                        negative action</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <h2 id="forms">Forms</h2><!-- Basic example -->

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>form</strong></p>

        <form>
            <!-- Inputs with different sizes -->

            <div class="form-group">
                <input class="form-control" placeholder="input.form-control"
                type="text">
            </div>

            <div class="form-group">
                <input class="form-control input-lg" placeholder=".input-lg"
                type="text">
            </div>

            <div class="form-group">
                <input class="form-control input-sm" placeholder=".input-sm"
                type="text">
            </div><!-- Textarea -->

            <div class="form-group">
                <textarea class="form-control" rows="3">
textarea.form-control
</textarea>
            </div><!-- File input -->

            <div class="form-group">
                <label for="example-file-input">input[type="file"]</label>
                <input id="example-file-input" type="file"> <span class=
                "help-block">.help-block: Wrap labels and controls in
                <code>.form-group</code> for optimum spacing.</span>
            </div><!-- Button -->

            <div class="form-group">
                <button class="btn btn-default" type="submit">Submit</button>
            </div>
        </form>
    </div><!-- Inline form -->

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>form.form-inline</strong></p>

        <form class="form-inline">
            <div class="form-group">
                <input class="form-control" id="example-text-input-inline"
                placeholder="input.form-control" type="text">
            </div>

            <div class="checkbox">
                <label><input type="checkbox"> .checkbox
                input[type="checkbox"]</label>
            </div><button class="btn btn-default" type="submit">Submit</button>
        </form>
    </div><br>
    <!-- Horizontal form -->

    <div class="js-html-inspector" data-remove-target=
    '["p:not([class])","br"]'>
        <p><strong>form.form-horizontal</strong></p>

        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-3 control-label" for=
                "example-text-input-horizontal">label.control-label</label>

                <div class="col-sm-9">
                    <input class="form-control" id=
                    "example-text-input-horizontal" placeholder=
                    "input.form-control" type="text">
                </div>
            </div>

            <div class="form-group form-group-lg">
                <label class="col-sm-3 control-label" for=
                "example-text-input-horizontal-lg">label.control-label</label>

                <div class="col-sm-9">
                    <input class="form-control" id=
                    "example-text-input-horizontal-lg" placeholder=
                    ".form-group-lg input.form-control" type="text">
                </div>
            </div>

            <div class="form-group form-group-sm">
                <label class="col-sm-3 control-label" for=
                "example-text-input-horizontal-sm">label.control-label</label>

                <div class="col-sm-9">
                    <input class="form-control" id=
                    "example-text-input-horizontal-sm" placeholder=
                    ".form-group-sm input.form-control" type="text">
                </div>
            </div><!-- Checkbox -->

            <div class="form-group">
                <label class="col-sm-3 control-label">Checkboxes</label>

                <div class="col-sm-9">
                    <div class="checkbox">
                        <label><input type="checkbox"> .checkbox
                        input[type="checkbox"]</label>
                    </div>
                </div>
            </div><!-- Inline checkboxes -->

            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <label class="checkbox-inline"><input type="checkbox"
                    value="option1"> label.checkbox-inline Checkbox #1</label>
                    <label class="checkbox-inline"><input type="checkbox"
                    value="option2"> Checkbox #2</label> <label class=
                    "checkbox-inline disabled"><input disabled type="checkbox"
                    value="option3"> Disabled checkbox #3</label>
                </div>
            </div><!-- Radio -->

            <div class="form-group">
                <label class="col-sm-3 control-label">Radios</label>

                <div class="col-sm-9">
                    <div class="radio">
                        <label><input checked name="optionsRadios" type="radio"
                        value="option1"> .radio input[type="radio"]</label>
                    </div>
                </div>
            </div><!-- Inline radios -->

            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <label class="radio-inline"><input checked name=
                    "optionsRadios2" type="radio" value="option1">
                    label.radio-inline Radio #1</label> <label class=
                    "radio-inline"><input name="optionsRadios2" type="radio"
                    value="option2"> Radio #2</label> <label class=
                    "radio-inline disabled"><input disabled name=
                    "optionsRadios2" type="radio" value="option3"> Disabled
                    radio #3</label>
                </div>
            </div><!-- Select -->

            <div class="form-group">
                <label class=
                "col-sm-3 control-label">select.form-control</label>

                <div class="col-sm-4">
                    <select class="form-control">
                        <option>
                            option
                        </option>

                        <option>
                            Option #2
                        </option>

                        <option>
                            Option #3
                        </option>
                    </select><br>
                    <select class="form-control" disabled>
                        <option>
                            select[disabled]
                        </option>
                    </select>
                </div>

                <div class="col-sm-5">
                    <br class="visible-xs">

                    <p>
                    <strong>select.form-control[multiple]</strong></p><select class="form-control"
                    multiple>
                        <option>
                            Option #1
                        </option>

                        <option selected>
                            option[selected]
                        </option>

                        <option>
                            Option #3
                        </option>

                        <option selected>
                            Selected option #4
                        </option>

                        <option>
                            Option #5
                        </option>
                    </select>
                </div>
            </div><!-- Static control -->

            <div class="form-group">
                <label class="col-sm-3 control-label">Static control</label>

                <div class="col-sm-9">
                    <p class="form-control-static">p.form-control-static</p>
                </div>
            </div><!-- Disabled input -->

            <div class="form-group">
                <label class="col-sm-3 control-label">Disabled input</label>

                <div class="col-sm-9">
                    <input class="form-control" disabled placeholder=
                    "input.form-control[disabled]" type="text">
                </div>
            </div><!-- Button -->

            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <button class="btn btn-default" type=
                    "submit">Submit</button>
                </div>
            </div>
        </form>
    </div><!-- Validation states -->

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>Validation styles on form controls</strong></p>

        <form class="form-horizontal">
            <!-- Success state -->

            <div class="form-group has-success">
                <label class="col-sm-3 control-label" for=
                "input-success">.has-success</label>

                <div class="col-sm-9">
                    <input class="form-control" id="input-success" placeholder=
                    "input.form-control" type="text">
                </div>
            </div>

            <div class="form-group has-success has-feedback">
                <label class="col-sm-3 control-label" for=
                "input-success-2">.has-feedback</label>

                <div class="col-sm-9">
                    <input class="form-control" id="input-success-2"
                    placeholder=".form-control-feedback" type="text">
                    <span class=
                    "glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div><!-- Warning state -->

            <div class="form-group has-warning">
                <label class="col-sm-3 control-label" for=
                "input-warning">.has-warning</label>

                <div class="col-sm-9">
                    <input class="form-control" id="input-warning" placeholder=
                    "input.form-control" type="text">
                </div>
            </div>

            <div class="form-group has-warning has-feedback">
                <label class="col-sm-3 control-label" for=
                "input-warning-2">.has-feedback</label>

                <div class="col-sm-9">
                    <input class="form-control" id="input-warning-2"
                    placeholder=".form-control-feedback" type="text">
                    <span class=
                    "glyphicon glyphicon-warning-sign form-control-feedback"></span>
                </div>
            </div><!-- Error state -->

            <div class="form-group has-error">
                <label class="col-sm-3 control-label" for=
                "input-error">.has-error</label>

                <div class="col-sm-9">
                    <input class="form-control" id="input-error" placeholder=
                    "input.form-control" type="text">
                </div>
            </div>

            <div class="form-group has-error has-feedback">
                <label class="col-sm-3 control-label" for=
                "input-error-2">.has-feedback</label>

                <div class="col-sm-9">
                    <input class="form-control" id="input-error-2" placeholder=
                    ".form-control-feedback" type="text"> <span class=
                    "glyphicon glyphicon-remove form-control-feedback"></span>
                </div>
            </div>
        </form>
    </div>

    <h2 id="buttons">Buttons</h2><!-- Styled buttons -->

    <p class="bse-buttons js-html-inspector"><button class="btn btn-default"
    type="button">button.btn.btn-default</button> <button class=
    "btn btn-primary" type="button">.btn-primary</button> <button class=
    "btn btn-success" type="button">.btn-success</button> <button class=
    "btn btn-info" type="button">.btn-info</button> <button class=
    "btn btn-warning" type="button">.btn-warning</button> <button class=
    "btn btn-danger" type="button">.btn-danger</button> <button class=
    "btn btn-link" type="button">.btn-link</button></p><!-- Button sizes -->

    <p class="bse-buttons js-html-inspector"><button class=
    "btn btn-default btn-lg" type="button">.btn-lg</button> <button class=
    "btn btn-default" type="button">Default button size</button> <button class=
    "btn btn-default btn-sm" type="button">.btn-sm</button> <button class=
    "btn btn-default btn-xs" type="button">.btn-xs</button></p>
    <!-- Block level buttons -->

    <p class="js-html-inspector"><button class="btn btn-primary btn-block"
    type="button">.btn-block</button> <button class="btn btn-default btn-block"
    type="button">.btn-block</button></p><!-- Button tags -->

    <p class="bse-buttons js-html-inspector"><a class="btn btn-default" href=
    "#">a</a> <button class="btn btn-default" type="button">button</button>
    <input class="btn btn-default" type="button" value="input[type='button']">
    <input class="btn btn-default" type="submit" value=
    "input[type='submit']"></p>

    <p class="bse-buttons js-html-inspector"><!-- Active state -->
     <a class="btn btn-default active" href="#">a.active</a> <button class=
    "btn btn-default active" type="button">button.active</button> 
    <!-- Disabled state -->
     <a class="btn btn-default disabled" href="#">a.disabled</a> <button class=
    "btn btn-default" disabled="disabled" type=
    "button">button[disabled]</button></p>

    <h2 id="images">Images</h2>

    <div class="row bs-thumbnails js-html-inspector" data-remove-target="p"
    data-replace-target="&gt; div">
        <div class="col-sm-3 col-xs-6">
        <p><strong>.img-rounded</strong></p><img alt=".img-rounded" class=
        "img-rounded" src=
        ""></div>

        <div class="col-sm-3 col-xs-6">
        <p><strong>.img-circle</strong></p><img alt=".img-circle" class=
        "img-circle" src=
        ""></div>

        <div class="col-sm-3 col-xs-6">
        <p><strong>.img-thumbnail</strong></p><img alt=".img-thumbnail" class=
        "img-thumbnail" src=
        ""></div>

        <div class="col-sm-3 col-xs-6">
        <p><strong>.img-responsive</strong></p><img alt=".img-responsive"
        class="img-responsive" src=
        ""></div>
    </div>

    <h2 id="helper-classes">Helper classes</h2><!-- Contextual colors -->

    <p class="js-html-inspector"><span class="text-muted">.text-muted</span>
    <span class="text-primary">.text-primary</span> <span class=
    "text-success">.text-success</span> <span class=
    "text-info">.text-info</span> <span class=
    "text-warning">.text-warning</span> <span class=
    "text-danger">.text-danger</span></p><!-- Contextual backgrounds -->

    <p class="js-html-inspector"><span class="bg-primary">.bg-primary</span>
    <span class="bg-success">.bg-success</span> <span class=
    "bg-info">.bg-info</span> <span class="bg-warning">.bg-warning</span>
    <span class="bg-danger">.bg-danger</span></p><!-- Close icon -->

    <p class="js-html-inspector">button.close &rarr; <button class="close"
    type="button">&times;</button></p><!-- Carets -->

    <p class="js-html-inspector">.caret <span class="caret"></span></p>
    <!-- Clearfix and floats -->

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.clearfix</strong></p>

        <div class="clearfix">
            <div class="pull-left">
                .pull-left
            </div>

            <div class="pull-right">
                .pull-right
            </div>
        </div>
    </div><br>

    <p><!-- Center content blocks -->
     <code>.center-block</code>: Set an element to <code>display: block</code>
    and center via <code>margin</code>.<br></p>

    <p><!-- Showing and hiding content -->
     <code>.show</code> and <code>.hidden</code>: Showing and hiding
    content.<br>
    <code>.invisible</code>: Toggle only the visibility of an element.<br></p>

    <p><!-- Screen reader content -->
     <code>.sr-only</code>: Hide an element to all devices <b>except screen
    readers</b>.<br></p>

    <p><!-- Image replacement -->
     <code>.text-hide</code>: Replace an element's text content with a
    background image.</p>

    <h1 class="page-header" id="components">Components</h1>

    <h2 id="glyphicons">Glyphicons</h2>

    <p><a href="http://glyphicons.com/" target="_blank">Glyphicons</a> classes:
    <code>glyphicon glyphicon-*</code></p><!-- Simple symbols -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-asterisk"></span> asterisk</li>

        <li><span class="glyphicon glyphicon-plus"></span> plus</li>

        <li><span class="glyphicon glyphicon-minus"></span> minus</li>

        <li><span class="glyphicon glyphicon-ok"></span> ok</li>

        <li><span class="glyphicon glyphicon-remove"></span> remove</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-remove-circle"></span>
        remove-circle</li>

        <li><span class="glyphicon glyphicon-ok-circle"></span> ok-circle</li>

        <li><span class="glyphicon glyphicon-ban-circle"></span>
        ban-circle</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-copyright-mark"></span>
        copyright-mark</li>

        <li><span class="glyphicon glyphicon-registration-mark"></span>
        registration-mark</li>
    </ul><!-- Directions -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-chevron-left"></span>
        chevron-left</li>

        <li><span class="glyphicon glyphicon-chevron-right"></span>
        chevron-right</li>

        <li><span class="glyphicon glyphicon-chevron-up"></span>
        chevron-up</li>

        <li><span class="glyphicon glyphicon-chevron-down"></span>
        chevron-down</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-arrow-left"></span>
        arrow-left</li>

        <li><span class="glyphicon glyphicon-arrow-right"></span>
        arrow-right</li>

        <li><span class="glyphicon glyphicon-arrow-up"></span> arrow-up</li>

        <li><span class="glyphicon glyphicon-arrow-down"></span>
        arrow-down</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-hand-left"></span> hand-left</li>

        <li><span class="glyphicon glyphicon-hand-right"></span>
        hand-right</li>

        <li><span class="glyphicon glyphicon-hand-up"></span> hand-up</li>

        <li><span class="glyphicon glyphicon-hand-down"></span> hand-down</li>

        <li><span class="glyphicon glyphicon-thumbs-up"></span> thumbs-up</li>

        <li><span class="glyphicon glyphicon-thumbs-down"></span>
        thumbs-down</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-circle-arrow-left"></span>
        circle-arrow-left</li>

        <li><span class="glyphicon glyphicon-circle-arrow-right"></span>
        circle-arrow-right</li>

        <li><span class="glyphicon glyphicon-circle-arrow-up"></span>
        circle-arrow-up</li>

        <li><span class="glyphicon glyphicon-circle-arrow-down"></span>
        circle-arrow-down</li>
    </ul><!-- Transfer -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-signal"></span> signal</li>

        <li><span class="glyphicon glyphicon-envelope"></span> envelope</li>

        <li><span class="glyphicon glyphicon-inbox"></span> inbox</li>

        <li><span class="glyphicon glyphicon-cloud"></span> cloud</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-cloud-download"></span>
        cloud-download</li>

        <li><span class="glyphicon glyphicon-cloud-upload"></span>
        cloud-upload</li>

        <li><span class="glyphicon glyphicon-download-alt"></span>
        download-alt</li>

        <li><span class="glyphicon glyphicon-download"></span> download</li>

        <li><span class="glyphicon glyphicon-upload"></span> upload</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-transfer"></span> transfer</li>

        <li><span class="glyphicon glyphicon-share-alt"></span> share-alt</li>

        <li><span class="glyphicon glyphicon-send"></span> send</li>

        <li><span class="glyphicon glyphicon-retweet"></span> retweet</li>
    </ul>

    <ul class="list-inline">
        <!-- Functions (group by style) -->

        <li><span class="glyphicon glyphicon-open"></span> open</li>

        <li><span class="glyphicon glyphicon-save"></span> save</li>

        <li><span class="glyphicon glyphicon-saved"></span> saved</li>

        <li><span class="glyphicon glyphicon-import"></span> import</li>

        <li><span class="glyphicon glyphicon-export"></span> export</li>

        <li style="list-style: none"><br>
        <!-- Functions (disc) --></li>

        <li><span class="glyphicon glyphicon-play"></span> play</li>

        <li><span class="glyphicon glyphicon-pause"></span> pause</li>

        <li><span class="glyphicon glyphicon-stop"></span> stop</li>

        <li><span class="glyphicon glyphicon-eject"></span> eject</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-fast-backward"></span>
        fast-backward</li>

        <li><span class="glyphicon glyphicon-step-backward"></span>
        step-backward</li>

        <li><span class="glyphicon glyphicon-backward"></span> backward</li>

        <li><span class="glyphicon glyphicon-forward"></span> forward</li>

        <li><span class="glyphicon glyphicon-step-forward"></span>
        step-forward</li>

        <li><span class="glyphicon glyphicon-fast-forward"></span>
        fast-forward</li>
    </ul><!-- Functions (display) -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-zoom-in"></span> zoom-in</li>

        <li><span class="glyphicon glyphicon-zoom-out"></span> zoom-out</li>

        <li><span class="glyphicon glyphicon-fullscreen"></span>
        fullscreen</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-resize-full"></span>
        resize-full</li>

        <li><span class="glyphicon glyphicon-resize-small"></span>
        resize-small</li>

        <li><span class="glyphicon glyphicon-resize-vertical"></span>
        resize-vertical</li>

        <li><span class="glyphicon glyphicon-resize-horizontal"></span>
        resize-horizontal</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-eye-open"></span> eye-open</li>

        <li><span class="glyphicon glyphicon-eye-close"></span> eye-close</li>
    </ul><!-- Functions (group by style) -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-check"></span> check</li>

        <li><span class="glyphicon glyphicon-unchecked"></span> unchecked</li>

        <li><span class="glyphicon glyphicon-expand"></span> expand</li>

        <li><span class="glyphicon glyphicon-collapse-down"></span>
        collapse-down</li>

        <li><span class="glyphicon glyphicon-collapse-up"></span>
        collapse-up</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-log-in"></span> log-in</li>

        <li><span class="glyphicon glyphicon-log-out"></span> log-out</li>

        <li><span class="glyphicon glyphicon-new-window"></span>
        new-window</li>

        <li><span class="glyphicon glyphicon-edit"></span> edit</li>

        <li><span class="glyphicon glyphicon-share"></span> share</li>
    </ul><!-- Functions (text editor) -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-font"></span> font</li>

        <li><span class="glyphicon glyphicon-bold"></span> bold</li>

        <li><span class="glyphicon glyphicon-italic"></span> italic</li>

        <li><span class="glyphicon glyphicon-header"></span> header</li>

        <li><span class="glyphicon glyphicon-text-height"></span>
        text-height</li>

        <li><span class="glyphicon glyphicon-text-width"></span>
        text-width</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-align-left"></span>
        align-left</li>

        <li><span class="glyphicon glyphicon-align-center"></span>
        align-center</li>

        <li><span class="glyphicon glyphicon-align-right"></span>
        align-right</li>

        <li><span class="glyphicon glyphicon-align-justify"></span>
        align-justify</li>

        <li><span class="glyphicon glyphicon-indent-left"></span>
        indent-left</li>

        <li><span class="glyphicon glyphicon-indent-right"></span>
        indent-right</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-list"></span> list</li>

        <li><span class="glyphicon glyphicon-list-alt"></span> list-alt</li>

        <li><span class="glyphicon glyphicon-th-list"></span> th-list</li>

        <li><span class="glyphicon glyphicon-th-large"></span> th-large</li>

        <li><span class="glyphicon glyphicon-th"></span> th</li>

        <li><span class="glyphicon glyphicon-filter"></span> filter</li>
    </ul><!-- Functions (sort) -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-sort"></span> sort</li>

        <li><span class="glyphicon glyphicon-sort-by-alphabet"></span>
        sort-by-alphabet</li>

        <li><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
        sort-by-alphabet-alt</li>

        <li><span class="glyphicon glyphicon-sort-by-order"></span>
        sort-by-order</li>

        <li><span class="glyphicon glyphicon-sort-by-order-alt"></span>
        sort-by-order-alt</li>

        <li><span class="glyphicon glyphicon-sort-by-attributes"></span>
        sort-by-attributes</li>

        <li><span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
        sort-by-attributes-alt</li>
    </ul><!-- Functions (group by floppy disk style) -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-floppy-disk"></span>
        floppy-disk</li>

        <li><span class="glyphicon glyphicon-floppy-saved"></span>
        floppy-saved</li>

        <li><span class="glyphicon glyphicon-floppy-remove"></span>
        floppy-remove</li>

        <li><span class="glyphicon glyphicon-floppy-save"></span>
        floppy-save</li>

        <li><span class="glyphicon glyphicon-floppy-open"></span>
        floppy-open</li>
    </ul><!-- Functions -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-home"></span> home</li>

        <li><span class="glyphicon glyphicon-dashboard"></span> dashboard</li>

        <li><span class="glyphicon glyphicon-tasks"></span> tasks</li>

        <li><span class="glyphicon glyphicon-stats"></span> stats</li>

        <li><span class="glyphicon glyphicon-link"></span> link</li>

        <li><span class="glyphicon glyphicon-comment"></span> comment</li>

        <li><span class="glyphicon glyphicon-calendar"></span> calendar</li>

        <li><span class="glyphicon glyphicon-time"></span> time</li>

        <li><span class="glyphicon glyphicon-print"></span> print</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-user"></span> user</li>

        <li><span class="glyphicon glyphicon-certificate"></span>
        certificate</li>

        <li><span class="glyphicon glyphicon-qrcode"></span> qrcode</li>

        <li><span class="glyphicon glyphicon-barcode"></span> barcode</li>
    </ul><!-- Element symbols -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-globe"></span> globe</li>

        <li><span class="glyphicon glyphicon-tower"></span> tower</li>

        <li><span class="glyphicon glyphicon-road"></span> road</li>

        <li><span class="glyphicon glyphicon-tree-conifer"></span>
        tree-conifer</li>

        <li><span class="glyphicon glyphicon-tree-deciduous"></span>
        tree-deciduous</li>

        <li><span class="glyphicon glyphicon-leaf"></span> leaf</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-heart"></span> heart</li>

        <li><span class="glyphicon glyphicon-heart-empty"></span>
        heart-empty</li>

        <li><span class="glyphicon glyphicon-star"></span> star</li>

        <li><span class="glyphicon glyphicon-star-empty"></span>
        star-empty</li>

        <li><span class="glyphicon glyphicon-flash"></span> flash</li>

        <li><span class="glyphicon glyphicon-fire"></span> fire</li>
    </ul><!-- Tools -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-search"></span> search</li>

        <li><span class="glyphicon glyphicon-flag"></span> flag</li>

        <li><span class="glyphicon glyphicon-pencil"></span> pencil</li>

        <li><span class="glyphicon glyphicon-wrench"></span> wrench</li>

        <li><span class="glyphicon glyphicon-cog"></span> cog</li>

        <li><span class="glyphicon glyphicon-cutlery"></span> cutlery</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-plane"></span> plane</li>

        <li><span class="glyphicon glyphicon-trash"></span> trash</li>

        <li><span class="glyphicon glyphicon-shopping-cart"></span>
        shopping-cart</li>

        <li><span class="glyphicon glyphicon-briefcase"></span> briefcase</li>

        <li><span class="glyphicon glyphicon-gift"></span> gift</li>

        <li><span class="glyphicon glyphicon-glass"></span> glass</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-phone-alt"></span> phone-alt</li>

        <li><span class="glyphicon glyphicon-earphone"></span> earphone</li>

        <li><span class="glyphicon glyphicon-phone"></span> phone</li>

        <li><span class="glyphicon glyphicon-bullhorn"></span> bullhorn</li>

        <li><span class="glyphicon glyphicon-bell"></span> bell</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-hdd"></span> hdd</li>

        <li><span class="glyphicon glyphicon-folder-close"></span>
        folder-close</li>

        <li><span class="glyphicon glyphicon-folder-open"></span>
        folder-open</li>

        <li><span class="glyphicon glyphicon-file"></span> file</li>

        <li><span class="glyphicon glyphicon-tags"></span> tags</li>

        <li><span class="glyphicon glyphicon-tag"></span> tag</li>

        <li><span class="glyphicon glyphicon-book"></span> book</li>

        <li><span class="glyphicon glyphicon-bookmark"></span> bookmark</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-lock"></span> lock</li>

        <li><span class="glyphicon glyphicon-compressed"></span>
        compressed</li>

        <li><span class="glyphicon glyphicon-magnet"></span> magnet</li>

        <li><span class="glyphicon glyphicon-paperclip"></span> paperclip</li>

        <li><span class="glyphicon glyphicon-pushpin"></span> pushpin</li>
    </ul><!-- Signs -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-plus-sign"></span> plus-sign</li>

        <li><span class="glyphicon glyphicon-minus-sign"></span>
        minus-sign</li>

        <li><span class="glyphicon glyphicon-remove-sign"></span>
        remove-sign</li>

        <li><span class="glyphicon glyphicon-ok-sign"></span> ok-sign</li>

        <li><span class="glyphicon glyphicon-question-sign"></span>
        question-sign</li>

        <li><span class="glyphicon glyphicon-info-sign"></span> info-sign</li>

        <li><span class="glyphicon glyphicon-exclamation-sign"></span>
        exclamation-sign</li>

        <li><span class="glyphicon glyphicon-warning-sign"></span>
        warning-sign</li>
    </ul><!-- Picture -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-picture"></span> picture</li>

        <li><span class="glyphicon glyphicon-map-marker"></span>
        map-marker</li>

        <li><span class="glyphicon glyphicon-adjust"></span> adjust</li>

        <li><span class="glyphicon glyphicon-tint"></span> tint</li>

        <li><span class="glyphicon glyphicon-move"></span> move</li>

        <li><span class="glyphicon glyphicon-screenshot"></span>
        screenshot</li>
    </ul><!-- Video -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-film"></span> film</li>

        <li><span class="glyphicon glyphicon-camera"></span> camera</li>

        <li><span class="glyphicon glyphicon-facetime-video"></span>
        facetime-video</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-sd-video"></span> sd-video</li>

        <li><span class="glyphicon glyphicon-hd-video"></span> hd-video</li>

        <li><span class="glyphicon glyphicon-subtitles"></span> subtitles</li>
    </ul><!-- Sound -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-music"></span> music</li>

        <li><span class="glyphicon glyphicon-headphones"></span>
        headphones</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-volume-off"></span>
        volume-off</li>

        <li><span class="glyphicon glyphicon-volume-down"></span>
        volume-down</li>

        <li><span class="glyphicon glyphicon-volume-up"></span> volume-up</li>

        <li style="list-style: none"><br></li>

        <li><span class="glyphicon glyphicon-play-circle"></span>
        play-circle</li>

        <li><span class="glyphicon glyphicon-repeat"></span> repeat</li>

        <li><span class="glyphicon glyphicon-record"></span> record</li>

        <li><span class="glyphicon glyphicon-off"></span> off</li>

        <li><span class="glyphicon glyphicon-random"></span> random</li>

        <li><span class="glyphicon glyphicon-refresh"></span> refresh</li>
    </ul>

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-sound-stereo"></span>
        sound-stereo</li>

        <li><span class="glyphicon glyphicon-sound-dolby"></span>
        sound-dolby</li>

        <li><span class="glyphicon glyphicon-sound-5-1"></span> sound-5-1</li>

        <li><span class="glyphicon glyphicon-sound-6-1"></span> sound-6-1</li>

        <li><span class="glyphicon glyphicon-sound-7-1"></span> sound-7-1</li>
    </ul><!-- $ -->

    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-credit-card"></span>
        credit-card</li>

        <li><span class="glyphicon glyphicon-euro"></span> euro</li>

        <li><span class="glyphicon glyphicon-usd"></span> usd</li>

        <li><span class="glyphicon glyphicon-gbp"></span> gbp</li>
    </ul>

    <h2 id="dropdowns">Dropdowns</h2>

    <div class="clearfix js-html-inspector" data-remove-target="p:first">
        <p><strong>.dropdown ul.dropdown-menu</strong></p>

        <div class="dropdown">
            <!-- Only use inline style for static display -->

            <ul class="dropdown-menu" style=
            "display: block; position: static;">
                <li class="dropdown-header">li.dropdown-header</li>

                <li>
                    <a href="#">li a</a>
                </li>

                <li>
                    <a href="#">Another link</a>
                </li>

                <li class="disabled">
                    <a href="#">li.disabled a</a>
                </li>

                <li class="divider"></li>

                <li class="dropdown-header">Dropdown header</li>

                <li>
                    <a href="#">Separated link</a>
                </li>
            </ul>
        </div>
    </div>

    <h2 id="button-groups">Button groups</h2>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.btn-group</strong></p>

        <div class="btn-group">
            <button class="btn btn-default" type="button">#1</button>
            <button class="btn btn-default" type="button">#2</button>
            <button class="btn btn-default" type="button">#3</button>
        </div>
    </div><br>

    <div class="js-html-inspector" data-remove-class-target="div.bse-buttons"
    data-remove-target="p:first">
        <p><strong>.btn-toolbar .btn-group</strong></p>

        <div class="btn-toolbar bse-buttons">
            <!-- Large button group -->

            <div class="btn-group btn-group-lg">
                <button class="btn btn-default" type="button">.btn-group-lg
                #1</button> <button class="btn btn-default" type=
                "button">#2</button> <button class="btn btn-default" type=
                "button">#3</button>
            </div><!-- Small button group -->

            <div class="btn-group btn-group-sm">
                <button class="btn btn-default" type="button">.btn-group-sm
                #1</button> <button class="btn btn-default" type=
                "button">#2</button> <button class="btn btn-default" type=
                "button">#3</button>
            </div><!-- Extra small button group -->

            <div class="btn-group btn-group-xs">
                <button class="btn btn-default" type="button">.btn-group-xs
                #1</button> <button class="btn btn-default" type=
                "button">#2</button> <button class="btn btn-default" type=
                "button">#3</button>
            </div>
        </div>
    </div><br>

    <div class="btn-toolbar bse-buttons js-html-inspector">
        <!-- Button group with dropdown -->

        <div class="btn-group">
            <button class="btn btn-default" type="button">#1</button>
            <button class="btn btn-default" type="button">#2</button>

            <div class="btn-group">
                <button class="btn btn-default dropdown-toggle" data-toggle=
                "dropdown" type="button">button.dropdown-toggle <span class=
                "caret"></span></button>

                <ul class="dropdown-menu">
                    <li>
                        <a href="#">Link #1</a>
                    </li>

                    <li>
                        <a href="#">Link #2</a>
                    </li>
                </ul>
            </div>
        </div>&nbsp;
        <!-- Only .btn-group has left padding inside .btn-toolbar -->
         <!-- Vertical button group with dropdown -->

        <div class="btn-group-vertical">
            <button class="btn btn-default" type="button">.btn-group-vertical
            button</button>

            <div class="btn-group">
                <button class="btn btn-default dropdown-toggle" data-toggle=
                "dropdown" type="button">Dropdown <span class=
                "caret"></span></button>

                <ul class="dropdown-menu">
                    <li>
                        <a href="#">Link #1</a>
                    </li>

                    <li>
                        <a href="#">Link #2</a>
                    </li>
                </ul>
            </div><button class="btn btn-default" type="button">#3</button>
        </div>
    </div><br>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.btn-group.btn-group-justified</strong></p>

        <div class="btn-group btn-group-justified">
            <a class="btn btn-default" href="#">#1</a> <a class=
            "btn btn-default" href="#">#2</a> <a class="btn btn-default" href=
            "#">#3</a>
        </div>
    </div><br>

    <div class="js-html-inspector" data-remove-class-target="div.bse-buttons"
    data-remove-target="p:first">
        <p><strong>.btn-group.dropup</strong></p><!-- Split button dropup -->

        <div class="btn-group dropup bse-buttons">
            <button class="btn btn-default" type="button">.dropdown-menu
            &rarr;</button> <button class="btn btn-default dropdown-toggle"
            data-toggle="dropdown" type="button"><span class=
            "caret"></span></button>

            <ul class="dropdown-menu">
                <li>
                    <a href="#">Link #1</a>
                </li>

                <li>
                    <a href="#">Link #2</a>
                </li>
            </ul>
        </div><!-- Split button right dropup -->

        <div class="btn-group dropup">
            <button class="btn btn-default" type="button">.dropdown-menu-right
            &rarr;</button> <button class="btn btn-default dropdown-toggle"
            data-toggle="dropdown" type="button"><span class=
            "caret"></span></button>

            <ul class="dropdown-menu dropdown-menu-right">
                <li>
                    <a href="#">Link #1</a>
                </li>

                <li>
                    <a href="#">Link #2</a>
                </li>
            </ul>
        </div>
    </div>

    <h2 id="input-groups">Input groups</h2>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.input-group</strong></p>

        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">.input-group-addon</span>
                <input class="form-control" placeholder="input.form-control"
                type="text"> <span class="input-group-addon"><input type=
                "checkbox"></span> <span class="input-group-addon"><input type=
                "radio"></span>
            </div>
        </div>

        <div class="form-group">
            <div class="input-group">
                <input class="form-control" placeholder="input.form-control"
                type="text"> <span class="input-group-btn"><button class=
                "btn btn-default" type="button"><span class=
                "input-group-btn">.input-group-btn
                button</span></button></span>
            </div>
        </div>
    </div>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.input-group-lg</strong></p>

        <div class="form-group">
            <div class="input-group input-group-lg">
                <span class="input-group-addon">Addon</span> <input class=
                "form-control input-lg" placeholder=".input-lg" type="text">
                <span class="input-group-addon">Addon</span>
            </div>
        </div>
    </div>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.input-group-sm</strong></p>

        <div class="form-group">
            <div class="input-group input-group-sm">
                <span class="input-group-addon">Addon</span> <input class=
                "form-control input-sm" placeholder=".input-sm" type="text">
                <span class="input-group-addon">Addon</span>
            </div>
        </div>
    </div>

    <h2 id="navs">Navs</h2>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>ul.nav.nav-tabs</strong></p>

        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#">li.active a</a>
            </li>

            <li class="disabled">
                <a href="#">li.disabled a</a>
            </li>

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href=
                "#">li.dropdown <span class="caret"></span></a>

                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a href="#">Link #1</a>
                    </li>

                    <li>
                        <a href="#">Link #2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="js-html-inspector" data-remove-target='["p:first","br"]'>
        <br>

        <p><strong>ul.nav.nav-pills</strong></p>

        <ul class="nav nav-pills">
            <li class="active">
                <a href="#">li.active a</a>
            </li>

            <li class="disabled">
                <a href="#">li.disabled a</a>
            </li>

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href=
                "#">li.dropdown <span class="caret"></span></a>

                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a href="#">Link #1</a>
                    </li>

                    <li>
                        <a href="#">Link #2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="js-html-inspector" data-remove-target='["p:first","br"]'>
        <br>

        <p><strong>ul.nav.nav-pills.nav-stacked</strong></p>

        <ul class="nav nav-pills nav-stacked">
            <li class="active">
                <a href="#">li.active a <span class=
                "badge pull-right">.badge.pull-right</span></a>
            </li>

            <li class="disabled">
                <a href="#">li.disabled a</a>
            </li>

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href=
                "#">li.dropdown <span class="caret"></span></a>

                <ul class="dropdown-menu">
                    <li>
                        <a href="#">Link #1</a>
                    </li>

                    <li>
                        <a href="#">Link #2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="js-html-inspector" data-remove-target='["p:first","br"]'>
        <br>

        <p><strong>ul.nav.nav-tabs.nav-justified</strong></p>

        <ul class="nav nav-tabs nav-justified">
            <li class="active">
                <a href="#">li.active a <span class="badge">.badge</span></a>
            </li>

            <li>
                <a href="#">Link #2</a>
            </li>

            <li>
                <a href="#">Link #3</a>
            </li>
        </ul>
    </div>

    <div class="js-html-inspector" data-remove-target='["p:first","br"]'>
        <br>

        <p><strong>ul.nav.nav-pills.nav-justified</strong></p>

        <ul class="nav nav-pills nav-justified">
            <li class="active">
                <a href="#">li.active a <span class="badge">.badge</span></a>
            </li>

            <li>
                <a href="#">Link #2</a>
            </li>

            <li>
                <a href="#">Link #3</a>
            </li>
        </ul>
    </div>

    <h2 id="navbar">Navbar</h2>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.navbar.navbar-default .container-fluid</strong></p>

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->

                <div class="navbar-header">
                    <a class="navbar-brand" href="#">.navbar-header
                    .navbar-brand</a>
                </div>

                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">ul.nav.navbar-nav li.active a</a>
                    </li>

                    <li>
                        <a href="#">Link #2</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.navbar.navbar-inverse .container-fluid</strong></p>

        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <p class="navbar-text">p.navbar-text <a class="navbar-link"
                href="#">a.navbar-link</a></p>
                <!-- Add the .navbar-btn class to <button> elements not residing
      in a <form> to vertically center them in the navbar. -->
                <button class="btn btn-default navbar-btn" type=
                "button">.navbar-btn</button> <button class=
                "btn btn-default navbar-btn btn-sm" type=
                "button">.btn-sm</button> <button class=
                "btn btn-default navbar-btn btn-xs" type=
                "button">.btn-xs</button>
            </div>
        </nav>
    </div>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p>Complex navbar with <code>navbar-left</code>,
        <code>navbar-right</code> and <code>navbar-collapse</code>.</p>

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button class="navbar-toggle" data-target=
                    "#navbar-collapse-2" data-toggle="collapse" type=
                    "button"><span class="icon-bar"></span> <span class=
                    "icon-bar"></span> <span class="icon-bar"></span></button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <div class="collapse navbar-collapse" id="navbar-collapse-2">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown"
                            href="#">Dropdown <b class="caret"></b></a>

                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Link #1</a>
                                </li>

                                <li>
                                    <a href="#">Link #2</a>
                                </li>
                            </ul>
                        </li>
                    </ul>

                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input class="form-control" placeholder=
                            ".navbar-form.navbar-left" type="text">
                        </div><button class="btn btn-default" type=
                        "submit">Submit</button>
                    </form>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown"
                            href="#">.navbar-right Dropdown <b class=
                            "caret"></b></a>

                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Link #1</a>
                                </li>

                                <li>
                                    <a href="#">Link #2</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div>
        </nav>
    </div>

    <h2 id="breadcrumbs">Breadcrumbs</h2>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>ol.breadcrumb</strong></p>

        <ol class="breadcrumb">
            <li>
                <a href="#">li a</a>
            </li>

            <li>
                <a href="#">Link #2</a>
            </li>

            <li class="active">li.active</li>
        </ol>
    </div>

    <h2 id="pagination">Pagination</h2>

    <div class="js-html-inspector" data-remove-target="div:first">
        <div>
            <strong>ul.pagination</strong>
        </div>

        <ul class="pagination">
            <li>
                <a href="#">&laquo;</a>
            </li>

            <li>
                <a href="#">li a</a>
            </li>

            <li class="active">
                <a href="#">li.active a</a>
            </li>

            <li class="disabled">
                <a href="#">li.disabled a</a>
            </li>

            <li>
                <a href="#">&raquo;</a>
            </li>
        </ul>
    </div>

    <div class="js-html-inspector" data-remove-target="div:first">
        <div>
            <strong>ul.pagination.pagination-lg</strong>
        </div>

        <ul class="pagination pagination-lg">
            <li>
                <a href="#">&laquo;</a>
            </li>

            <li>
                <a href="#">#1</a>
            </li>

            <li class="active">
                <a href="#">#2</a>
            </li>

            <li>
                <a href="#">#3</a>
            </li>

            <li>
                <a href="#">&raquo;</a>
            </li>
        </ul>
    </div>

    <div class="js-html-inspector" data-remove-target="div:first">
        <div>
            <strong>ul.pagination.pagination-sm</strong>
        </div>

        <ul class="pagination pagination-sm">
            <li>
                <a href="#">&laquo;</a>
            </li>

            <li>
                <a href="#">#1</a>
            </li>

            <li class="active">
                <a href="#">#2</a>
            </li>

            <li>
                <a href="#">#3</a>
            </li>

            <li>
                <a href="#">&raquo;</a>
            </li>
        </ul>
    </div>

    <div class="js-html-inspector" data-remove-target="div:first">
        <div>
            <strong>ul.pager</strong>
        </div><!-- Default pager -->

        <ul class="pager">
            <li>
                <a href="#">li a "Previous"</a>
            </li>

            <li>
                <a href="#">li a "Next"</a>
            </li>
        </ul><!-- Aligned pager links -->

        <ul class="pager">
            <li class="previous">
                <a href="#">li.previous a "&larr; Older"</a>
            </li>

            <li class="next">
                <a href="#">li.next a "Newer &rarr;"</a>
            </li>
        </ul>
    </div>

    <h2 id="labels">Labels</h2>

    <p class="js-html-inspector" data-remove-target="p:first"><span class=
    "label label-default">.label.label-default</span> <span class=
    "label label-primary">.label.label-primary</span> <span class=
    "label label-success">.label.label-success</span> <span class=
    "label label-info">.label.label-info</span> <span class=
    "label label-warning">.label.label-warning</span> <span class=
    "label label-danger">.label.label-danger</span></p>

    <h2 id="jumbotron">Jumbotron</h2>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.jumbotron</strong></p>

        <div class="jumbotron">
            <h1>Heading</h1>

            <p>Paragraph</p>

            <p><a class="btn btn-primary">Button</a></p>
        </div>
    </div>

    <h2 id="page-header">Page header</h2>

    <div class="js-html-inspector">
        <div class="page-header">
            <h3>.page-header h3 <small>small</small></h3>
        </div>
    </div>

    <h2 id="thumbnails">Thumbnails</h2>
    <!-- @TODO: Use 200x200 images instead of style="width: 100%" -->

    <div class="row">
        <div class="col-sm-3 col-xs-6 js-html-inspector" data-remove-target=
        "p:first">
            <p><strong>.thumbnail</strong></p>

            <div class="thumbnail">
                <img alt="thumbnail" src=
                ""
                style="width: 100%">

                <div class="caption">
                    <h3>.caption h3</h3>

                    <p>Paragraph</p>

                    <p><a class="btn btn-default" href="#">Button</a></p>
                </div>
            </div>
        </div>

        <div class="col-sm-3 col-xs-6 js-html-inspector" data-remove-target=
        "p:first">
            <p><strong>.thumbnail</strong></p>

            <div class="thumbnail">
                <img alt="thumbnail" src=
                ""
                style="width: 100%">

                <div class="caption">
                    <h3>Caption</h3>

                    <p>Paragraph</p>

                    <p><a class="btn btn-default" href="#">Button</a></p>
                </div>
            </div>
        </div>

        <div class="col-sm-3 col-xs-6 js-html-inspector" data-remove-target=
        "p:first">
            <p><strong>.thumbnail</strong></p>

            <div class="thumbnail">
                <img alt="thumbnail" src=
                ""
                style="width: 100%">

                <div class="caption">
                    <h3>Caption</h3>

                    <p>Paragraph</p>

                    <p><a class="btn btn-default" href="#">Button</a></p>
                </div>
            </div>
        </div>

        <div class="col-sm-3 col-xs-6 js-html-inspector" data-remove-target=
        "p:first">
            <p><strong>.thumbnail</strong></p>

            <div class="thumbnail">
                <img alt="thumbnail" src=
                ""
                style="width: 100%">

                <div class="caption">
                    <h3>Caption</h3>

                    <p>Paragraph</p>

                    <p><a class="btn btn-default" href="#">Button</a></p>
                </div>
            </div>
        </div>
    </div>

    <h2 id="alerts">Alerts</h2><!-- Alerts -->

    <div class="js-html-inspector">
        <!-- The misspelled .alert-dismissable was deprecated in 3.2.0. -->

        <div class="alert alert-dismissible">
            <button class="close" data-dismiss="alert" type=
            "button">&times;</button> .alert.alert-dismissible
        </div>
    </div>

    <div class="row js-html-inspector" data-replace-target="&gt; div">
        <div class="col-sm-6">
            <div class="alert alert-success">
                .alert.alert-success <a class="alert-link" href=
                "#">a.alert-link</a>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="alert alert-info">
                .alert.alert-info <a class="alert-link" href=
                "#">a.alert-link</a>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="alert alert-warning">
                .alert.alert-warning <a class="alert-link" href=
                "#">a.alert-link</a>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="alert alert-danger">
                .alert.alert-danger <a class="alert-link" href=
                "#">a.alert-link</a>
            </div>
        </div>
    </div>

    <h2 id="progress-bars">Progress bars</h2>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.progress</strong></p>

        <div class="progress">
            <div class="progress-bar" style="width: 80%;">
                <span>.progress-bar</span>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 80%;">
                <span>.progress-bar.progress-bar-success</span>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-info" style="width: 80%;">
                <span>.progress-bar.progress-bar-info</span>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-warning" style="width: 80%;">
                <span>.progress-bar.progress-bar-warning</span>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-danger" style="width: 80%;">
                <span>.progress-bar.progress-bar-danger</span>
            </div>
        </div>
    </div>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.progress .progress-bar.progress-bar-striped</strong></p>

        <div class="progress">
            <div class="progress-bar progress-bar-striped" style="width: 17%;">
            </div>

            <div class="progress-bar progress-bar-striped progress-bar-success"
            style="width: 17%;"></div>

            <div class="progress-bar progress-bar-striped progress-bar-info"
            style="width: 17%;"></div>

            <div class="progress-bar progress-bar-striped progress-bar-warning"
            style="width: 17%;"></div>

            <div class="progress-bar progress-bar-striped progress-bar-danger"
            style="width: 17%;"></div>
        </div>
    </div>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.progress.active
        .progress-bar.progress-bar-striped</strong></p>

        <div class="progress active">
            <div class="progress-bar progress-bar-striped" style="width: 17%;">
            </div>

            <div class="progress-bar progress-bar-striped progress-bar-success"
            style="width: 17%;"></div>

            <div class="progress-bar progress-bar-striped progress-bar-info"
            style="width: 17%;"></div>

            <div class="progress-bar progress-bar-striped progress-bar-warning"
            style="width: 17%;"></div>

            <div class="progress-bar progress-bar-striped progress-bar-danger"
            style="width: 17%;"></div>
        </div>
    </div>

    <h2 id="media-object">Media object</h2>

    <div class="js-html-inspector" data-remove-target="strong:first">
        <strong>.media</strong>

        <div class="media">
            <a class="media-left" href="#"><img alt=".media-object" class=
            "media-object" src=
            ""></a>

            <div class="media-body">
                <h4 class="media-heading">.media-body
                h4.media-heading</h4>&larr; a.media-left img.media-object
            </div>
        </div>
    </div><br>

    <div class="js-html-inspector" data-remove-target="p:first">
        <strong>.media</strong>

        <div class="media">
            <a class="media-left media-middle" href="#"><img alt=
            ".media-object" class="media-object" src=
            ""></a>

            <div class="media-body">
                <h4 class="media-heading">.media-body
                h4.media-heading</h4>&larr; a.media-left.<span style=
                "text-decoration: underline">media-middle</span>
                img.media-object

                <div class="media">
                    <a class="media-left" href="#"><img alt=".media-object"
                    class="media-object" src=
                    ""></a>

                    <div class="media-body">
                        <h4 class="media-heading">.media .media-body
                        h4.media-heading</h4>&larr; a.media-left
                        img.media-object
                    </div>
                </div>
            </div>
        </div>
    </div><br>

    <div class="js-html-inspector" data-remove-target="p:first">
        <strong>ul.media-list</strong>

        <ul class="media-list">
            <li class="media">
                <a class="media-left media-bottom" href="#"><img alt=
                ".media-object" class="media-object" src=
                ""></a>

                <div class="media-body">
                    <h4 class="media-heading">li.media .media-body
                    h4.media-heading</h4>&larr; a.media-left.<span style=
                    "text-decoration: underline">media-bottom</span>
                    img.media-object

                    <div class="media">
                        <a class="media-left" href="#"><img alt=".media-object"
                        class="media-object" src=
                        ""></a>

                        <div class="media-body">
                            <h4 class="media-heading">.media .media-body
                            h4.media-heading</h4>&larr; a.media-left
                            img.media-object
                        </div>
                    </div>
                </div>
            </li>

            <li class="media">
                <div class="media-body">
                    <h4 class="media-heading">li.media .media-body
                    h4.media-heading</h4>a.media-right img.media-object &rarr;
                </div><a class="media-right" href="#"><img alt=".media-object"
                class="media-object" src=
                ""></a>
            </li>
        </ul>
    </div>

    <h2 id="list-group">List group</h2>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>ul.list-group</strong></p>

        <ul class="list-group">
            <li class="list-group-item">li.list-group-item</li>

            <li class="list-group-item">List item #2 <span class=
            "badge">.badge</span></li>

            <li class="list-group-item">List item #3</li>
        </ul>
    </div>

    <div class="row">
        <div class="col-md-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>div.list-group</strong></p>

            <div class="list-group">
                <a class="list-group-item" href="#">a.list-group-item</a>
                <a class="list-group-item list-group-item-success" href=
                "#">a.list-group-item.list-group-item-success</a> <a class=
                "list-group-item list-group-item-info" href=
                "#">a.list-group-item.list-group-item-info</a> <a class=
                "list-group-item list-group-item-warning" href=
                "#">a.list-group-item.list-group-item-warning</a> <a class=
                "list-group-item list-group-item-danger" href=
                "#">a.list-group-item.list-group-item-danger</a>
            </div>
        </div>

        <div class="col-md-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>div.list-group</strong></p>

            <div class="list-group">
                <a class="list-group-item active" href=
                "#">a.list-group-item.active</a> <a class=
                "list-group-item list-group-item-success active" href=
                "#">a.list-group-item.list-group-item-success.active</a>
                <a class="list-group-item list-group-item-info active" href=
                "#">a.list-group-item.list-group-item-info.active</a> <a class=
                "list-group-item list-group-item-warning active" href=
                "#">a.list-group-item.list-group-item-warning.active</a>
                <a class="list-group-item list-group-item-danger active" href=
                "#">a.list-group-item.list-group-item-danger.active</a>
            </div>
        </div>
    </div>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>div.list-group</strong></p>

        <div class="list-group">
            <a class="list-group-item active" href="#">
            <h4 class="list-group-item-heading">h4.list-group-item-heading</h4>

            <p class="list-group-item-text">p.list-group-item-text</p></a>
            <a class="list-group-item" href="#">
            <h4 class="list-group-item-heading">List group item heading</h4>

            <p class="list-group-item-text">Paragraph</p></a>
        </div>
    </div>

    <h2 id="panels">Panels</h2>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.panel.panel-default</strong></p>

        <div class="panel panel-default">
            <div class="panel-heading">
                .panel-heading
            </div>

            <div class="panel-heading">
                <h3 class="panel-title">.panel-heading h3.panel-title</h3>
            </div>

            <div class="panel-body">
                .panel-body
            </div>

            <div class="panel-footer">
                .panel-footer
            </div>
        </div>
    </div>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.panel.panel-primary</strong></p>

        <div class="panel panel-primary">
            <div class="panel-heading">
                .panel-heading
            </div>

            <div class="panel-body">
                .panel-body
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>.panel.panel-success</strong></p>

            <div class="panel panel-success">
                <div class="panel-heading">
                    .panel-heading
                </div>

                <div class="panel-body">
                    .panel-body
                </div>
            </div>
        </div>

        <div class="col-sm-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>.panel.panel-info</strong></p>

            <div class="panel panel-info">
                <div class="panel-heading">
                    .panel-heading
                </div>

                <div class="panel-body">
                    .panel-body
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>.panel.panel-warning (with table)</strong></p>

            <div class="panel panel-warning">
                <div class="panel-heading">
                    .panel-heading
                </div>

                <table class="table">
                    <thead>
                        <tr>
                            <th>Header</th>

                            <th>Header</th>

                            <th>Header</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>Data</td>

                            <td>Data</td>

                            <td>Data</td>
                        </tr>

                        <tr>
                            <td>Data</td>

                            <td>Data</td>

                            <td>Data</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-sm-6 js-html-inspector" data-remove-target="p:first">
            <p><strong>.panel.panel-danger (with list group)</strong></p>

            <div class="panel panel-danger">
                <div class="panel-heading">
                    .panel-heading
                </div>

                <ul class="list-group">
                    <li class="list-group-item">List item</li>

                    <li class="list-group-item">List item</li>

                    <li class="list-group-item">List item</li>
                </ul>
            </div>
        </div>
    </div>

    <h2 id="wells">Wells</h2>

    <div class="row js-html-inspector" data-replace-target="&gt; div">
        <div class="col-sm-4">
            <div class="well well-lg">
                .well.well-lg
            </div>
        </div>

        <div class="col-sm-4">
            <div class="well">
                .well
            </div>
        </div>

        <div class="col-sm-4">
            <div class="well well-sm">
                .well.well-sm
            </div>
        </div>
    </div>

    <h1 class="page-header" id="javascript">Javascript</h1>

    <h2 id="js-modals">Modals</h2>

    <p class="bse-buttons">Via data attributes:
    <code>data-toggle="modal"</code> <code>data-target="#modal"</code>
    <a class="btn btn-primary" data-toggle="modal" href="#modal">Launch
    modal</a></p>

    <p class="bse-buttons">Via Javascript: <code>$('#modal').modal()</code>
    <a class="btn btn-primary" href="#" onclick=
    "$('#modal').modal(); return false;">Launch modal</a></p>

    <div>
        <a class="btn btn-primary" data-toggle="modal" href="#modal-lg">Large
        modal</a> <a class="btn btn-primary" data-toggle="modal" href=
        "#modal-sm">Small modal</a>
    </div><!-- Static modal example -->

    <div class="js-html-inspector" data-remove-target='["p:first","span"]'>
        <!-- Only use inline style for static display -->

        <div class="modal" style=
        "display: block; position: static; overflow: hidden;">
            <div class="modal-dialog">
                <p><strong>.modal .modal-dialog .modal-content</strong></p>

                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" type="button">&times;</button>

                        <h4 class="modal-title">.modal-header
                        h4.modal-title</h4>
                    </div>

                    <div class="modal-body">
                        .modal-body
                    </div>

                    <div class="modal-footer">
                        <span>.modal-footer</span> <button class=
                        "btn btn-default" data-dismiss="modal" type=
                        "button">Close</button> <button class="btn btn-primary"
                        type="button">Button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <p>Options: <code>backdrop: true|false|'static'</code> <code>keyboard:
    true|false</code> <code>show: true|false</code> <code>remote:
    false|path</code></p>

    <p>Methods: <code>.modal('toggle')</code> <code>.modal('show')</code>
    <code>.modal('hide')</code></p>

    <p>Events: <code>show.bs.modal</code> <code>shown.bs.modal</code>
    <code>hide.bs.modal</code> <code>hidden.bs.modal</code>
    <code>loaded.bs.modal</code></p><!-- Default modal -->

    <div class="modal fade" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type=
                    "button">&times;</button>

                    <h4 class="modal-title">.modal-title</h4>
                </div>

                <div class="modal-body">
                    .modal-body
                </div>

                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" type=
                    "button">Close</button> <button class="btn btn-primary"
                    type="button">Button</button>
                </div>
            </div>
        </div>
    </div><!-- Optional sizes -->

    <div class="modal fade" id="modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type=
                    "button">&times;</button>

                    <h4 class="modal-title">.modal-title</h4>
                </div>

                <div class="modal-body">
                    .modal-body
                </div>

                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" type=
                    "button">Close</button> <button class="btn btn-primary"
                    type="button">Button</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-sm">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type=
                    "button">&times;</button>

                    <h4 class="modal-title">.modal-title</h4>
                </div>

                <div class="modal-body">
                    .modal-body
                </div>

                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" type=
                    "button">Close</button> <button class="btn btn-primary"
                    type="button">Button</button>
                </div>
            </div>
        </div>
    </div>

    <h2 id="js-dropdowns">Dropdowns</h2>

    <p>Via data attributes: <code>data-toggle="dropdown"</code></p>

    <div class="js-html-inspector">
        <div class="dropdown">
            <a class="btn btn-primary" data-toggle="dropdown" href="#">Dropdown
            trigger</a>

            <ul class="dropdown-menu">
                <li>
                    <a href="#">Link #1</a>
                </li>

                <li>
                    <a href="#">Link #2</a>
                </li>
            </ul>
        </div>
    </div>

    <p><br>
    Via Javascript:
    <code>$('.dropdown-toggle').dropdown()</code>(<code>data-toggle="dropdown"</code>
    still required)</p>

    <p>Methods: <code>.dropdown('toggle')</code></p>

    <p>Events: <code>show.bs.dropdown</code> <code>shown.bs.dropdown</code>
    <code>hide.bs.dropdown</code> <code>hidden.bs.dropdown</code></p>

    <h2 id="js-tabs">Tabs</h2>

    <p>Via data attributes: <code>data-toggle="tab"</code></p>

    <div class="js-html-inspector">
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#js-tab-pane1">Tab #1</a>
            </li>

            <li>
                <a data-toggle="tab" href="#js-tab-pane2">Tab #2</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="js-tab-pane1">
                <p>Content #1: .table-content .tab-pane.active</p>
            </div>

            <div class="tab-pane" id="js-tab-pane2">
                <p>Content #2: .table-content .tab-pane</p>
            </div>
        </div>
    </div>

    <p>Via Javascript: <code>$(this).tab('show')</code></p>

    <div class="js-html-inspector">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#js-tab-pane3" onclick=
                "$(this).tab('show'); return false;">Tab #1</a>
            </li>

            <li>
                <a href="#js-tab-pane4" onclick=
                "$(this).tab('show'); return false;">Tab #2</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade in active" id="js-tab-pane3">
                <p>Content #1: .table-content .tab-pane.fade.in.active</p>
            </div>

            <div class="tab-pane fade" id="js-tab-pane4">
                <p>Content #2: .table-content .tab-pane.fade</p>
            </div>
        </div>
    </div>

    <p>Events: <code>show.bs.tab</code> <code>shown.bs.tab</code></p>

    <h2 id="js-tooltips">Tooltips</h2>

    <p>Usage: <code>$('[data-toggle="tooltip"]').tooltip()</code></p>

    <div class="text-center js-html-inspector">
        <button class="btn btn-primary" data-placement="left" data-toggle=
        "tooltip" title="[title]" type="button">Left</button> <button class=
        "btn btn-primary" data-placement="top" data-toggle="tooltip" title=
        "[title]" type="button">Top</button> <button class="btn btn-primary"
        data-placement="bottom" data-toggle="tooltip" title="[title]" type=
        "button">Bottom</button> <button class="btn btn-primary"
        data-placement="right" data-toggle="tooltip" title="[title]" type=
        "button">Right</button>
    </div>

    <div class="text-center js-html-inspector">
        <!-- Static tooltip -->

        <div class="tooltip bottom" style=
        "display: inline-block; position: relative; opacity: 1; filter: alpha(opacity=100); z-index: 1000;">
        <div class="tooltip-inner">
                You must initialize them yourself
            </div>

            <div class="tooltip-arrow"></div>
        </div>
    </div>

    <p>Options: <code>animation: true|false</code> <code>html:
    false|true</code> <code>selector: false|string</code><br>
    <code>title: ''|function</code> <code>container: false|string</code><br>
    <code>placement: top|location|auto|function</code><br>
    <code>trigger: hover focus|click|manual</code><br>
    <code>delay: 0|{show:500, hide:100}</code></p>

    <p>Methods: <code>.tooltip('show')</code> <code>.tooltip('hide')</code>
    <code>.tooltip('toggle')</code> <code>.tooltip('destroy')</code></p>

    <p>Events: <code>show.bs.tooltip</code> <code>shown.bs.tooltip</code>
    <code>hide.bs.tooltip</code> <code>hidden.bs.tooltip</code></p>

    <h2 id="js-popovers">Popovers</h2>

    <p>Usage: <code>$('[data-toggle="popover"]').popover()</code></p>

    <div class="text-center js-html-inspector">
        <button class="btn btn-primary" data-content="[data-content]"
        data-placement="left" data-toggle="popover" title="[title]" type=
        "button">Left</button> <button class="btn btn-primary" data-content=
        "[data-content]" data-placement="top" data-toggle="popover" title=
        "[title]" type="button">Top</button> <button class="btn btn-primary"
        data-content="[data-content]" data-placement="bottom" data-toggle=
        "popover" title="[title]" type="button">Bottom</button> <button class=
        "btn btn-primary" data-content="[data-content]" data-placement="right"
        data-toggle="popover" title="[title]" type="button">Right</button>
    </div>

    <div class="text-center js-html-inspector">
        <!-- Static popover -->

        <div class="popover bottom" style=
        "display: inline-block; position: relative; z-index: 1000;">
            <div class="arrow"></div>

            <h3 class="popover-title">Popover</h3>

            <div class="popover-content">
                <p>You must initialize them yourself</p>
            </div>
        </div>
    </div>

    <p><br>
    Options: <code>animation: true|false</code> <code>html: false|true</code>
    <code>selector: false|string</code><br>
    <code>title: ''|function</code> <code>content: ''|function</code>
    <code>container: false|string</code><br>
    <code>placement: right|location|auto|function</code><br>
    <code>trigger: click|hover|focus|manual</code><br>
    <code>delay: 0|{show:500, hide:100}</code></p>

    <p>Methods: <code>.popover('show')</code> <code>.popover('hide')</code>
    <code>.popover('toggle')</code> <code>.popover('destroy')</code></p>

    <p>Events: <code>show.bs.popover</code> <code>shown.bs.popover</code>
    <code>hide.bs.popover</code> <code>hidden.bs.popover</code></p>

    <h2 id="js-alerts">Alerts</h2>

    <p>Via data attributes (close button):
    <code>data-dismiss="alert"</code></p>

    <div class="js-html-inspector">
        <div class="alert alert-danger fade in">
            <button class="close" data-dismiss="alert" type=
            "button">&times;</button> .alert.alert-danger.fade.in
        </div>
    </div>

    <p>Via Javascript: <code>$('.alert').alert()</code></p>

    <p>Methods: <code>.alert('close')</code></p>

    <p>Events: <code>close.bs.alert</code> <code>closed.bs.alert</code></p>

    <h2 id="js-buttons">Buttons</h2>

    <p>Stateful button: <code>data-loading-text="Loading..."</code>
    <code>data-complete-text="Completed"</code></p>

    <div class="bse-buttons js-html-inspector">
        <button class="btn btn-primary" data-complete-text="Completed"
        data-loading-text="Loading..." id="stateful" onclick=
        "$(this).button('loading').siblings().prop('disabled', false);" type=
        "button">$('#stateful').button('loading')</button> <button class=
        "btn btn-primary" disabled onclick=
        "$(this).prop('disabled', true); $('#stateful').button('complete');"
        type="button">$('#stateful').button('complete')</button> <button class=
        "btn btn-primary" disabled onclick=
        "$('#stateful').button('reset').siblings().prop('disabled', true);"
        type="button">$('#stateful').button('reset')</button>
    </div><br>

    <div class="js-html-inspector">
        Single toggle: <button class="btn btn-primary" data-toggle="button"
        type="button">[data-toggle="button"]</button>
    </div><br>

    <div class="bse-buttons js-html-inspector">
        Checkbox: <code>data-toggle="buttons"</code>

        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary"><input type="checkbox"> #1</label>
            <label class="btn btn-primary"><input type="checkbox"> #2</label>
            <label class="btn btn-primary disabled"><input type="checkbox">
            Disabled</label> <label class="btn btn-primary"><input type=
            "checkbox"> #4</label>
        </div>
    </div><br>

    <div class="bse-buttons js-html-inspector">
        Radio: <code>data-toggle="buttons"</code>

        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary"><input checked name=
            "optionsRadiosJS" type="radio" value="option1"> #1</label>
            <label class="btn btn-primary"><input name="optionsRadiosJS" type=
            "radio" value="option2"> #2</label> <label class=
            "btn btn-primary disabled"><input name="optionsRadiosJS" type=
            "radio" value="option3"> Disabled</label> <label class=
            "btn btn-primary"><input name="optionsRadiosJS" type="radio" value=
            "option2"> #4</label>
        </div>
    </div><br>

    <p>Methods: <code>.button('toggle')</code> <code>.button('loading')</code>
    <code>.button('reset')</code> <code>.button(string)</code></p>

    <h2 id="js-collapse">Collapse</h2>

    <p>Via data attributes: <code>data-toggle="collapse"</code></p>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>#accordion.panel-group</strong></p>

        <div class="panel-group" id="accordion">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="panel-title"><a class="accordion-toggle"
                    data-parent="#accordion" data-toggle="collapse" href=
                    "#collapse-1">data-toggle="collapse"
                    data-parent="#accordion" href="#collapse-1"</a></h4>
                </div>

                <div class="panel-collapse collapse in" id="collapse-1">
                    <div class="panel-body">
                        #collapse-1.collapse.in
                    </div>
                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="panel-title"><a class="accordion-toggle"
                    data-parent="#accordion" data-toggle="collapse" href=
                    "#collapse-2">data-toggle="collapse"
                    data-parent="#accordion" href="#collapse-2"</a></h4>
                </div>

                <div class="panel-collapse collapse" id="collapse-2">
                    <div class="panel-body">
                        #collapse-2.collapse
                    </div>
                </div>
            </div>
        </div>
    </div>

    <p>Via Javascript: <code>$(".collapse").collapse()</code></p>

    <p>Options: <code>parent: false|selector</code> <code>toggle:
    true|false</code></p>

    <p>Methods: <code>.collapse('toggle')</code> <code>.collapse('show')</code>
    <code>.collapse('hide')</code></p>

    <p>Events: <code>show.bs.collapse</code> <code>shown.bs.collapse</code>
    <code>hide.bs.collapse</code> <code>hidden.bs.collapse</code></p>

    <h2 id="js-carousel">Carousel</h2>

    <p>Via data attributes: <code>data-target="#carousel"</code>
    <code>data-slide</code> <code>data-slide-to</code>
    <code>data-ride</code></p>

    <p>Via Javascript: <code>$('.carousel').carousel()</code></p>

    <div class="js-html-inspector" data-remove-target="p:first">
        <p><strong>.carousel.slide</strong></p>

        <div class="carousel slide" id="carousel">
            <!-- Indicators -->

            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target="#carousel">
                </li>

                <li data-slide-to="1" data-target="#carousel"></li>

                <li data-slide-to="2" data-target="#carousel"></li>
            </ol><!-- Wrapper for slides -->

            <div class="carousel-inner">
                <div class="item active">
                    <img alt="First slide" src=
                    "">

                    <div class="carousel-caption">
                        <h3>.carousel-caption h3</h3>

                        <p>Paragraph</p>
                    </div>
                </div>

                <div class="item">
                    <a href="#"><img alt="Second slide" src=
                    ""></a>
                </div>

                <div class="item">
                    <a href="#"><img alt="Third slide" src=
                    ""></a>
                </div>
            </div><!-- Controls -->
            <a class="left carousel-control" data-slide="prev" href=
            "#carousel"><span class="icon-prev"></span></a> <a class=
            "right carousel-control" data-slide="next" href=
            "#carousel"><span class="icon-next"></span></a>
        </div>
    </div><br>

    <p>Options: <code>interval: 5000</code> <code>pause: hover</code>
    <code>wrap: true|false</code></p>

    <p>Methods: <code>.carousel('cycle')</code> <code>.carousel('pause')</code>
    <code>.carousel(number)</code> <code>.carousel('prev')</code>
    <code>.carousel('next')</code></p>

    <p>Events: <code>slide.bs.carousel</code> <code>slid.bs.carousel</code></p>
</juci-layout-single-column>
